import React from "react";
import Banner from './Banner';
import './static/style';
import {Link} from "umi";
import {Avatar, Button, Card, Col, Divider, Dropdown, Menu, message, Modal, Row, Space} from "antd";
import HeaderSearch from "@/components/HeaderSearch";
import {ClockCircleOutlined, EyeOutlined, LikeOutlined, MessageOutlined, UserOutlined} from "@ant-design/icons";
import {getStore, removeStore} from "@/utils/store";
import {AUTH_INFO} from "@/common/constant";
import {getPage} from "@/services/wold";
import {history} from "@@/core/history";

import styles from "./static/header.less";

let isMobile = false;
const {Meta} = Card;

export default class HelloWorld extends React.PureComponent {

  index = 0;

  state = {
    isMobile,
    updateUI: false,
    modalVisible: false,
    modalIndex: 0,
    dataList: [],
    showShadow: false,
  };

  outLogin = () => {
    removeStore({
      name: AUTH_INFO,
      type: false
    });
    message.success("退出成功");
    history.push(`/`);
  }

  navToShadow = (e) => {
    this.setState({ showShadow: e.mode === 'leave' });
  }

  authInfo = getStore({
    name: AUTH_INFO,
  });
  menu = (
    <Menu>
      <Menu.Item>
        <Link to="/cms/welcome">个人中心</Link>
      </Menu.Item>
      <Menu.Item>
        <a onClick={this.outLogin}>退出登录</a>
      </Menu.Item>
    </Menu>
  );


  componentDidMount() {
    getPage().then((response) => {
      this.setState({dataList: response.data.records});
    });
  }

  handleDetail = () => {
    this.setState({modalIndex: this.index, modalVisible: true});
  };

  addLike = (index) => {
    const dataList = this.state.dataList;
    dataList[index].likeNum++;
    this.setState({updateUI: !this.state.updateUI, dataList: dataList});
  }

  addRead = (index) => {
    const dataList = this.state.dataList;
    dataList[index].readNum++;
    this.setState({dataList: dataList});
  }

  render() {
    const {dataList, modalVisible, modalIndex} = this.state;

    return (
      [
        <header key="header" className={this.state.showShadow ? 'show-shadow' : ''}>
          <a className="logo-wrapper" target="_blank">
            <i className="logo"/>
            <span>诗甜智慧学习助手</span>
          </a>
          {(this.authInfo?.member_id === undefined || this.authInfo?.member_id === null) && <div className="button">
            <Link to="/user/login">
              <Button><span>登录</span></Button>
            </Link>
          </div>}
          {this.authInfo?.member_id && <div className="button">
            <Dropdown overlay={this.menu}>
              <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                {this.authInfo.username}
              </a>
            </Dropdown>
          </div>}
          <div className="button-style1">
            <Link to="HelloWorld">
              <Button className="Button">HelloWorld</Button>
            </Link>
          </div>
          <div className="button-style1">
            <Link to="/">
              <Button className="Button">主页</Button>
            </Link>
          </div>
          <div className="button-style1">
            <HeaderSearch
              className={`${styles.search}`}
              placeholder="文章搜索"
              defaultValue=""
              onSearch={value => {
                getPage(Object.assign({
                  title: value,
                  author: value
                })).then((response) => {
                  this.setState({dataList: response.data.records});
                });
              }}
            />
          </div>
        </header>,
        <Banner key="banner" isMobile={this.state.isMobile} navToShadow={this.navToShadow} />,
        <dev key="main">
          {this.state.updateUI && <></>}
          {dataList.length && <Modal width={1400}
                                     title={dataList[modalIndex].title}
                                     visible={modalVisible}
                                     onCancel={() => this.setState({modalVisible: false})}
                                     footer={[<Space onClick={() => {
                                       this.addLike(this.index)
                                     }}>
                                       <LikeOutlined/>
                                       <span>{this.state.dataList[this.index].likeNum}</span>
                                     </Space>]}
          >
            <dev dangerouslySetInnerHTML={{__html: dataList[modalIndex].content}}/>
          </Modal>}
          {
            this.state.dataList.map((item, index) => (
              <>
                <Divider type="vertical"/>
                <Row>
                  <Col span={16} offset={4}>
                    <Card
                      hoverable={true}
                      actions={[
                        <Space>
                          <LikeOutlined/>
                          <span>{this.state.dataList[index].likeNum}</span>
                        </Space>,
                        <Space>
                          <EyeOutlined/>
                          <span>{this.state.dataList[index].readNum}</span>
                        </Space>,
                        <Space>
                          <MessageOutlined/>
                          <span>0</span>
                        </Space>,
                      ]}
                      onClick={() => {
                        this.index = index;
                        this.addRead(index);
                        this.handleDetail()
                      }}
                    >
                      <Meta
                        avatar={
                          <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>
                        }
                        title={item.title}
                        description={
                          <Space size={20}>
                            <dev>
                              <UserOutlined/> {item.author}
                            </dev>
                            <dev>
                              <ClockCircleOutlined/> {item.createTime}
                            </dev>
                          </Space>
                        }
                      />
                    </Card>
                  </Col>
                </Row>
              </>
            ))
          }
        </dev>
      ]
    );
  }
}
